<template>
    <div class="container">
        <img :src="info.userInfo.image" alt="" class="photo">
        <p class="nickname">{{info.userInfo.nickname}}</p>
        <p class="msg">{{msgForShow}}</p>
        <p class="date">{{timeForShow}}</p>
    </div>
</template>
    
<script setup>
    import {defineProps,computed,reactive} from 'vue'

    import {GoodsRequester} from '@/api/api.js'
    const GoodsRqster = new GoodsRequester();


    //接收props参数
    let props = defineProps({
        userID:{
            type:String,
            default:'001'
        },
        msgForShow:{
            type:String,
            default:'这是要展示的信息默认值'
        },
        //拿到的是Date对象
        time:{
            type:Object,
            default:Date.now().toLocaleString()
        },
        payload:{
            type:Object,
        }
    });

    let timeForShow = computed(()=>{
        //与当前日期相同，只显示上午/下午/晚上 + 时间
        if( new Date(new Date().getTime()).toLocaleDateString() == props.time.toLocaleDateString()){
            let str =  props.time.toLocaleString().split(' ')[1].slice(0,props.time.toLocaleString().split(' ')[1].length-3);
            return str;
        }
        else{
            return props.time.toLocaleDateString();
        }
    })

    let info = reactive({
        userInfo:{
            /* "id": 1,
            "userId": 1,
            "goodsId": "1",
            "type": 0,
            "credit": 50,
            "wemediaId": 1,
            "image": "http://fancyday.fit:9000/leasingplatform/2022/10/15/DefaultHeadPortraits.jpg",
            "nickname": "Mark",
            "status": 1 */
        }
    })

    GoodsRqster.reqMerchantDetial(props.userID).then(res=>{
        info.userInfo = res.data;
    })
</script>
    
<style lang="scss" scoped>
    .container{
        position: relative;
        width: 4.02rem;
        height: 1.27rem;
        img{
                width: 0.77rem;
                height: 0.77rem;
                position: absolute;
                left:0.14rem;
                top:0.21rem;
                border-radius: 50%;
            }

            .nickname{
                position: absolute;
                left:1.00rem;
                top:0.21rem;
                font-size: 0.18rem;
            }

            .msg{
                position: absolute;
                left:1.00rem;
                top:0.78rem;
                font-size: 0.14rem;
                color: #333333;
                width: 1.35rem;
                display: block; /* 当前元素本身是inline的，因此需要设置成block模式 */
                white-space: nowrap; /* 因为设置了block，所以需要设置nowrap来确保不换行 */
                overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
                text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */
            }

            .date{
                position: absolute;
                color: #bcbcbc;
                right: 0.19rem;
                top:0.5rem;
                font-size: 0.14rem;
            }
    }
</style>